// 目标使用webpack打包
// 编写两个js文件并引入过来使用
import {addFn} from './add/add.js'
console.log(addFn(5,2))
// 2.局部执行自定义命令，让webpack分析默认入口src/index.js,并打包多个js文件内容输出到dist/main.js(默认中)
// npm run build 
// 3.观察打包后的结果（极致压缩）

// 目标：代码变化重新输入npm run build打包会自动覆盖之前的
// 1.编写 tool封装函数并命名导出
// 2. 引入此函数使用
import {getArraySum} from './tool/tool.js'
console.log(getArraySum([5, 6, 9, 10]))

// 3.用node执行打包后的js文件看运行效果
// 运行的是打包后的文件

// 4.目标：案例-铺设列表
// a 新建pubilc/index.html  并准备ul标签
// b npm下载axios，并引入调用，请求接口地址http://ajax-api.itheima.net/api/books
// c 看接口文档的响应（不用运行）结果，先铺设页面
// d 打包src下相关的代码到dist中（npm run build）
// e 手动把dist/bundle.js引入到public/index.html中，运行前端网页
import axios from 'axios'
axios({
    url:'http://ajax-api.itheima.net/api/books'
}).then(res => {
    let bookArr = res.data.data
    document.querySelector('#myUL').innerHTML = bookArr.map(obj => `<li>${obj.bookname}</li>`).join('')
})

// 5.目标：用webpack自动生成html文件
// 插件： html-webpack-plugin
// 1.下插件
// 2.webpack配置插件
// 3.打包查看效果
// 作用：以指定html生成新的dist下html并引入打包后的文件

// 6 目标编写css文件，让webpack入口产生引入关系
// 1.新建src/css/index.css,编写样式代码
// 2.如果想让css被打爆，需要和webpack入口产生引入关系
import './css/index.css'
// 3.打包观察报错
// 结论： webpack默认只能识别js文件css文件需要加载器

// 7. 目标给webpack配置css-loader和style-loader加载器，打包css文件和代码
// 1. 下载包
// 2. 看文档，赋值配置项（读一读），给webpack配置上加载器使用
// 3. 重新打包观察效果

// 8. 目标让webpack打包less文件
// （1）新建less文件并编写代码
// （2）引入到入口
import './less/index.less'
// （3）webpack默认只能呢过识别js文件，所以想要更多文件类型，需要找到对应的加载器
// （4）看文档，下载less-loader和less这两包
// less-loader配合less会把less文件转成css文件加代码，交给css-loader处理
// （5）看笔记，直接复制配置项，打包观察效果

// 9.目标：让webpack打包图片文件
// （1）现在src/assets/中放入素材里的两个图片
// （2）less/index.less中给body价格背景图（css代码中直接写路径即可）
// （3）main.js中创建img标签，js中引入其他资源（当做模块引入），引入后再交给img的src展示
import imgObj from './assets/images/1.gif'
let theImg = document.createElement('img')
theImg.src = imgObj
document.body.appendChild(theImg)
// (4) 填入webpack针对图片文件的配置处理
// （5）打包观察运行后的代码，是否有图片
// webpack 5以上的版本有内置的加载器处理图片打包

// 10.目标：webpack打包字体文件，在前端项目使用字体图标
// （1）准备图标样式和字体文件（在阿里巴巴矢量图标库下载）
// （2）引入iconfont.css(自定义字体名字和类名)
import './assets/fonts/iconfont.css'
// (3)可以再public/index.html中定义i标签使用字体图标类名/js创建i标签使用都可以
// （4）填入webpack配置中
// （5）打包观察是否有字体图标使用了

// 11. webpack帮我降级js语法
const fn = () => {
    console.log("你好babel")
}
console.log(fn)//一定打印函数，才会被webpack把函数体打包起来
// webpack默认不会降级js语法
// 解决 webpack 添加babel配置，进行编译降级处理

// 12. 目标为何要学webpack开发服务器
// （1）每次写完代码，都需要（手动）打包，才会运行打包后，网页才能看到效果
// 效率低下，浪费时间，每次都手动打包麻烦
// （2）解决：webpack开发服务器-》他可以启动更新功能检测代码变化并自动打包，重新打包只打包变化的代码速度快，而且提供一个web服务端口号，把打包碗的网页和资源共浏览器访问

// 13.配置webpack开发服务器
// 1.下包webpack-dev-server
// 2.局部配置自定义命令“server”：“webpack server”
// 3.启动当前项目下的webpack开发服务器（命令：npm run server）
// 注意1   热更新问题
// 只有跟webpack入口产生引入关系的文件，才会被热更新追踪。代码变化会热更新
// webpack.config.js文件改完还是要重启服务器
// 注意2  开发服务器把代码打包进内存里，所以不会产生磁盘上的dist文件夹

// 14.webpack的使用经验
// 开发环境下（mode：'development'） 不极致压缩，尽可能快的打开服务器，
// 启动命令开发服务器命令： npm run serve

// 生产环境下（上线）（mode：'production'）机制压缩小
// 打包项目命令：npm run build
// 打包出dist（把dist发给运维部署上线）